import {Component} from "react";
import React from "react";
import axios from "axios"

import {NavLink, Redirect, Route} from "react-router-dom";
import ReactPlayer from 'react-player'
import '../MediaDetails/mediaDetail.css'
import Page from "../Page";
// import {nanoid} from "nanoid"
export default class modifyvideo extends Component{
    state = {
        path:[],
        // path : require("../../../img/cinatest2.mp4")
        a: "",
        b:"",
        response:{},
        fileSize:"",
        range:"",
        file:{},
        videoType:[],
        selectValue:'番剧'
    }
    fileBlob = React.createRef();
    vedioNameRef = React.createRef();
    vedioAuthRef = React.createRef();
    vediooutsourceIdRef = React.createRef();
    veidopathRef = React.createRef();
    fileIdRef = React.createRef();

    componentDidMount() {

        axios.request({
            method:"get",
            url: "http://192.168.56.1:7001/scms-edit/video/getVideoType",
        }).then((response)=>{
            this.setState({videoType:response.data.result})
        })
    }

    getFileSize = ()=>{
        axios.request({
            method:"post",
            headers:{'Range': "0-0"},
            url: "http://192.168.56.1:7001/scms-edit/test/ftp/filesize?fileName=cinatest3.mp4&buildRange=1",
        }).then((response)=>{
            console.log("文件长度: "+response.data)
            this.buildRange(response.data)
            this.setState({fileSize:response.data.result})
            this.getPlay()
        })
    }
    buildRange = (fileSize)=>{
        let segmentSize =  2 * 1024 * 1024;
        let i = 0;
        let offset = 0;
        let range = "bytes="
        let num =fileSize/segmentSize
        let prefileSize = fileSize
        let end = 0
        for (i = 1; i < num; i++) {
            if(fileSize>segmentSize){
                end = offset + segmentSize
                range = range+offset+"-"+end+","
                fileSize=fileSize-segmentSize
                offset = offset + segmentSize + 1
            }else{
                range = range+offset+"-"+prefileSize
            }

        }
        this.setState({range:range})

    }
    upLoad = ()=>{
        this.setState({file:this.fileBlob.current.files[0]})
        console.log("ref文件为:"+this.fileBlob.current.files[0])
        if(this.fileBlob==null){
            console.log("文件不存在")
            return
        }
        const file = this.fileBlob.current.files[0]
        let formData = new FormData()
        formData.append('file', file)
        axios.request({
            method:"post",
            data:formData,
            // data:this.fileBlob.current.value,
            headers:{'Content-Type':'multipart/form-data'},
            url: "http://192.168.56.1:7001/scms-edit/test/ftp/upload"
        }).then((response)=>{
            console.log(response)
            this.vedioNameRef.current.value = response.data.result.videoName
            this.veidopathRef.current.value = response.data.result.path
            this.fileIdRef.current.value = response.data.result.fileId
        
        })
    }


    getPlay = (obj)=>{
        axios.request({
            method:"post",
            // url:this.state.proxy +"/deletebyid",
            headers: {
                // 'Content-Type': 'multipart/form-data',
                'Range': this.state.range,
            },
            url: "http://192.168.56.1:7001/scms-edit/test/ftp/download?fileName=cinatest3.mp4",
            responseType: "blob"
        }).then(response => {
            console.log("response.headers的start:")
            // this.getPlay(response.start,response.end)
            // this.getPlay()
            this.createMiniQrcode(response.data)
            this.setState({a:1,response:response})
        })
        // this.setState({path: [...this.state.path,require("../../../img/cinatest2.mp4")] })
    }
    addVedio = ()=>{
        axios.request({
            method:"post",
            url: "http://192.168.56.1:7001/scms-edit/video/addVide",
            data:{
                videoType: this.state.selectValue,
                videoName: this.vedioNameRef.current.value,
                path: this.veidopathRef.current.value,
                auth: this.vedioAuthRef.current.value,
                fileId: this.fileIdRef.current.value
            }
        }).then(response=>{
            this.goback()
        })
    }



    // 生成对应的虚拟url
    createMiniQrcode = (blob)=> {
        // let img = document.createElement('mp4')
        // img.onload = function (e) {
        //     try {
        //         return img.src
        //     } catch (error) {
        //         return window.URL.revokeObjectURL(img.src)
        //     }
        //     // 元素的onload 事件触发后将销毁URL对象, 释放内存。
        // }


        let url = null
        const binaryData = [];
        binaryData.push(blob);
        url = window.URL.createObjectURL(new Blob(binaryData,{type:'video/mpeg4;chartset=UTF-8'}));
        console.log("blob"+blob)
        console.log("url: "+url)

        // 浏览器允许使用URL.createObjectURL()方法，针对 Blob 对象生成一个临时 URL。
        // 这个 URL 以blob://开头,表明对应一个 Blob 对象。
        // img.src = window.URL.createObjectURL(blob)
        // document.querySelector('.imgQrCode').appendChild(img)
        this.setState({path: [url]})
        // this.setState({path: [require("../../../img/cinatest2.mp4")]})
        // console.log("img.src = ",img.src)
    }
    getSelectVale = (event)=>{
        this.setState({selectValue:event.target.value})
    }



    goback = ()=>{
        window.history.back()
    }

    render(){
        return(
            <div className="main_content ">
                <span className="title">
                添加/修改媒资
                </span>
                <div class="mediamanage_content">
                    <button type="button" class="footer_btn_red mediadetails_butten goback_btn_position_left" onClick={()=>{this.goback()}}>
                        返回
                    </button>

                    {/*修改输入窗口*/}
                    <div className="box_parent" >
                            <div ref={this.inputRef} className="box">
                                {/*<a className='x' href=''>关闭</a>*/}
                                <div className="span_input">
                                    <span>媒资名称</span>
                                    <input type="text" ref={this.vedioNameRef}/>
                                </div>
                                <div className="span_input">
                                    <span>文件别名</span>
                                    <input type="text" ref={this.fileIdRef}/>
                                </div>
                                <div className="span_input" >
                                    <span>作者</span>
                                    <input type="text" ref={this.vedioAuthRef}/>
                                </div>
                                <div className="span_input" >
                                    <span>影片路径</span>
                                    <input type="text" ref={this.veidopathRef}/>
                                </div>

                                <div className="upLoad_box">
                                    <input  type="file" ref={this.fileBlob} ></input>&nbsp;<br></br>
                                    <button onClick={this.upLoad}>上传视频</button>
                                </div>

                                <span className="videoModify_select_box">
                                    影片类型&nbsp;&nbsp;
                                    <select className="footer_select" value={this.state.selectValue} onChange={(e)=>{
                                        this.getSelectVale(e)
                                    }}>
                                        {
                                            this.state.videoType.map((obj)=>{
                                                return(
                                                    <option index={obj.value}>{obj.desc}</option>
                                                )
                                            })
                                        }
                                    </select>
                                </span>&nbsp;&nbsp;

                                
                                <div className="tianjia_xiugai">
                                    <input type="button" value="修改" className="input_btn" onClick={()=>{this.changeItem();this.setState({switchBox:0})}}/>
                                    <input type="button" value="添加" className="input_btn" onClick={()=>{this.addVedio()}}/>
                                </div>
                            </div>
                        </div>
                </div>
            </div>
        )
    }
        
    
}